<template>
  <div class="home-goods">
    <div class="title">为你推荐</div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="goods-list">
        <template v-for="item in goods" :key="item.product_id">
          <GoodsItem @click="openGoods(item)" class="item" :item="item" />
        </template>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import GoodsItem from './GoodsItem/GoodsItem.vue'
import { getGoods } from '@/api/modules/goods'

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goods = ref([])

// -------------获取商品列表方法-------------

const getGoodsList = async (pageNum = 1, pageSize = 10) => {
  const {
    data: { data }
  } = await getGoods({ pageNum, pageSize })
  // console.log(data)
  goods.value = data.list
}

// -------------获取商品列表方法-------------

// -------------打开商品详情-------------
const openGoods = (item) => {
  router.push({
    name: 'GoodsDetail',
    query: {
      id: item.product_id
    }
  })
}
// -------------打开商品详情-------------

// -------------生命周期函数-------------

onMounted(() => {
  getGoodsList()
})

// -------------生命周期函数-------------

const count = ref(0)
const loading = ref(false)
const finished = ref(false)

const onLoad = () => {
  // count.value++
  // console.log(count.value)
  // loading.value = true
  // // getGoodsList(count.value)
  // loading.value = false
}
</script>

<style lang="less" scoped>
.home-goods {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f5f5;
  justify-content: space-around;
  padding: 10px;
  .title {
    width: 90%;
    margin: 10px auto;
    font-size: 1.1rem;
  }
  .item {
    width: 45%;
    margin-bottom: 10px;
  }
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    justify-content: space-around;
  }
}
</style>
